<template>
  <div class="comment" v-if="commentData">
    <div class="comment-header">
      <svg
        @click="$router.back()"
        t="1671798247143"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2281"
        width="200"
        height="200"
      >
        <path
          d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z"
          p-id="2282"
        ></path>
        <path
          d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
          p-id="2283"
        ></path>
      </svg>
      <span>商品评价</span>
      <svg
        t="1671798545812"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3355"
        width="200"
        height="200"
      >
        <path
          d="M320.64 848.05c-11.58-13.35-10.14-33.56 3.22-45.14l331.38-282.1c4.61-4 4.6-11.17-0.04-15.14L323.81 221.19c-13.41-11.51-14.95-31.71-3.44-45.12 11.51-13.41 31.71-14.95 45.12-3.44l378.88 325.25c9.27 7.96 9.3 22.29 0.07 30.29l-378.68 323.1c-13.34 11.57-33.55 10.13-45.12-3.22z"
          p-id="3356"
          fill="#ffffff"
        ></path>
      </svg>
    </div>
    <div class="comment-filter">
      <div class="title">
        <div class="left">
          <p>商品评价</p>
          <span>({{ commentData.commentsCount }})</span>
        </div>
        <div class="right">
          好评率 <span>{{ commentData.highPercent }}</span>
        </div>
      </div>
      <ul class="filter">
        <li :class="{ active: score == 0 }" @click="score = 0">
          <p>全部</p>
          <span>({{ commentData.commentsCount }})</span>
        </li>
        <li :class="{ active: score == 1 }" @click="score = 1">
          <p>有图</p>
          <span>({{ commentData.hasPicCount }})</span>
        </li>
        <li :class="{ active: score == 2 }" @click="score = 2">
          <p>好评</p>
          <span>({{ commentData.highCount }})</span>
        </li>
        <li :class="{ active: score == 3 }" @click="score = 3">
          <p>中评</p>
          <span>({{ commentData.middleCount }})</span>
        </li>
        <li :class="{ active: score == 4 }" @click="score = 4">
          <p>差评</p>
          <span>({{ commentData.lowCount }})</span>
        </li>
      </ul>
    </div>

    <ul class="comment-content" v-if="commentList">
      <li v-for="item in commentList" :key="item.commentId">
        <div class="user-msg">
          <img :src="item.memberAvatar" alt="" />
          <span>{{ item.memberName }}</span>
          <ul class="start">
            <li v-for="(i, index) in item.score" :key="index">
              <svg
                t="1671812233401"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="10930"
                width="200"
                height="200"
              >
                <path
                  d="M512.005628 86.322018 619.43129 394.883629l340.15005 2.428306L696.758446 605.436042 800.160467 937.679006 512.005628 739.707119 223.851812 937.679006l96.717785-336.665693L64.416614 397.311935l340.16233-2.428306L512.005628 86.322018z"
                  fill="#d81e06"
                  p-id="10931"
                ></path>
              </svg>
            </li>
          </ul>
        </div>
        <div class="time">
          {{ item.createTime }}
        </div>
        <div class="user-comment">
          <p>{{ item.content }}</p>
        </div>
      </li>
    </ul>

    <div class="comment-empty">
      <div class="empty" v-if="commentList.length == 0">
        <img
          src="https://image-mall.gxptkc.com/m/resources//empty_evaluate.png"
          alt=""
        />
        <p>该商品暂无评价</p>
      </div>
      <div class="over" v-if="commentList.length > 0">
        <p>数据加载完毕~</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentData: null,
      commentList: null,
      score: 0,
    };
  },
  async created() {
    let res = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/goods/front/goods/comment?productId=${this.$route.query.productId}`
    );
    this.commentData = res.data.data;
    this.commentList = res.data.data.list;
  },
  watch: {
    async score(newVal) {
      let res;
      if (newVal == 0) {
        res = await this.axios.get(
          `https://m-mall.gxptkc.com/v3/goods/front/goods/comment?productId=${this.$route.query.productId}&pageSize=20&current=1&type=`
        );
        this.commentList = res.data.data.list;
      } else if (newVal == 1) {
        res = await this.axios.get(
          `https://m-mall.gxptkc.com/v3/goods/front/goods/comment?productId=${this.$route.query.productId}&pageSize=20&current=1&type=hasPic`
        );
        this.commentList = res.data.data.list;
      } else if (newVal == 2) {
        res = await this.axios.get(
          `https://m-mall.gxptkc.com/v3/goods/front/goods/comment?productId=${this.$route.query.productId}&pageSize=20&current=1&type=high`
        );
        this.commentList = res.data.data.list;
      } else if (newVal == 3) {
        res = await this.axios.get(
          `https://m-mall.gxptkc.com/v3/goods/front/goods/comment?productId=${this.$route.query.productId}&pageSize=20&current=1&type=middle`
        );
        this.commentList = res.data.data.list;
      } else {
        res = await this.axios.get(
          `https://m-mall.gxptkc.com/v3/goods/front/goods/comment?productId=${this.$route.query.productId}&pageSize=20&current=1&type=low`
        );
        this.commentList = res.data.data.list;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.comment {
  background-color: rgb(248, 248, 248);
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: left;
  .comment-header {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rem;
    margin-bottom: 10rem;
    box-sizing: border-box;
    svg {
      width: 25rem;
      height: 25rem;
    }
    span {
      font-size: 16rem;
      font-weight: bold;
      color: #000;
    }
  }
  .comment-filter {
    background-color: #fff;
    padding: 10rem;
    box-sizing: border-box;
    margin-bottom: 10rem;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        font-size: 14rem;
        p {
          color: #333;
          font-weight: bold;
        }
        span {
          color: #949494;
          margin-left: 15rem;
        }
      }
      .right {
        color: #949494;
      }
    }
    ul.filter {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      margin-right: 10rem;
      margin-top: 13rem;
      li {
        // width: 90rem;
        border-radius: 20rem;
        color: #333;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6rem 20rem;
        margin: 0 10rem 10rem 0;
        &.active {
          color: #fc4141;
          background-color: #fff3f3;
        }
      }
    }
  }
  ul.comment-content {
    background-color: #fff;
    padding: 10rem 10rem 0;
    > li {
      margin-bottom: 10rem;
      border-bottom: 1px solid rgb(245, 245, 245);
      &:last-child {
        margin-bottom: 0;
      }
      .user-msg {
        display: flex;
        align-items: center;
        // margin: 10rem 0;
        img {
          width: 25rem;
          border-radius: 50%;
        }
        span {
          font-size: 13rem;
          color: #2d2d2d;
          margin: 0 10rem;
        }
        ul.start {
          display: flex;
          align-items: center;
          li {
            svg {
              width: 18rem;
              height: 18rem;
            }
          }
        }
      }
      .time {
        color: #949494;
        margin-top: 3rem;
      }
      .user-comment {
        margin: 10rem 0 20rem;
        p {
          font-size: 13rem;
          color: #2d2d2d;
        }
      }
    }
  }
  .comment-empty {
    background-color: #fff;
    flex-grow: 1;
    .empty {
      padding-top: 50rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      img {
        width: 106rem;
      }
      p {
        font-size: 13rem;
        color: #999;
        margin-top: 20rem;
      }
    }
    .over {
      text-align: center;
      padding-top: 15rem;
      p {
        color: #bbb;
      }
    }
  }
}
</style>